<template>
  <view class="category-page">
    <view class="category-page-header">
      <slot name="header">
        <xl-navbar :title="title" :back="back" :hiddenLeft="!title && !back" :hiddenRight="!title" sideWidth="80" backgroundColor="transparent">
          <xl-search v-if="!title" class="search" :margin="[0, 20]" background="#ffffff"></xl-search>
        </xl-navbar>
        <view v-if="title" class="header-search">
          <xl-search class="search" background="#ffffff"></xl-search>
        </view>
      </slot>
    </view>
    <xl-cascade
        :list="data"
        :curId="curId"
        :propNames="propNames"
        :loadApi="loadApi"
        :loadChildApi="loadChildApi"
        :height="scrollHeight"
        :color="color"
        :cascade="cascade"
        :banner="banner"
        :url="url"
        :showAll="showAll"
        :showBanner="showBanner"
        :hiddenLeft="hiddenLeft"
        @load="load"
        @loadChildren="loadChildren"
        @click="click"
    ></xl-cascade>
  </view>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import propsData from './props'
const props = defineProps(propsData)

const emits = defineEmits(['load', 'loadChildren', 'click'])

const scrollHeight = computed(()=>{
  if (Number(props.fixedHeight)) {
    return uni.$xl.parseUnit(props.fixedHeight, 'rpx');
  } else {
    let height = uni.getWindowInfo().screenHeight - uni.getWindowInfo().statusBarHeight - uni.$xl.upx2px(0 + props.reduceHeight)
    return uni.$xl.px2upx(height)
  }
})

onMounted(() => {
  // 检查API是否存在
  if (process.env.NODE_ENV === 'development') {
    if(props.leftApi && !uni.$xl.apis[props.leftApi]) {
      console.error('您配置的leftApi接口方法不存在')
      return
    }
    if(props.rightApi && !uni.$xl.apis[props.rightApi]) {
      console.error('您配置的rightApi接口方法不存在')
      return
    }
  }
})

function load(init){
  emits("load", init)
}

function loadChildren(category, initChildren){
  emits("loadChildren", category[props.propNames?.id || 'id'], initChildren)
}

function click(item){
  emits("click", item)
}
</script>

<style lang="scss" scoped>
.category-page {
  background: v-bind(background);
  &-header {
    width: 750rpx;
    padding-bottom: 12rpx;
    .header-search{
      padding: 0 20rpx 12rpx;
    }
    .search{
      width: 100%;
    }
  }
}
</style>